<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/view/main/stylesheet.jsp"%>
<link rel="stylesheet" type="text/css" href="${baseurl}/styles/frameword/css/list.css" />
<script src="${baseurl}/styles/frameword/js/list.js" type="text/javascript" charset="utf-8"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=a5f65f9f9203a3a384a3b5f708bad966"></script>
<script type="text/javascript">
	var url = "/pro-driver-user/";
	var mapObj;
	window.onload = function() {
		mapObj = new AMap.Map('container', {
			resizeEnable : true,
			zoom : 11,
			center : [ 121.472644, 31.227009 ]
		});
		AMap.plugin([ 'AMap.ToolBar', 'AMap.Scale', 'AMap.OverView' ],
				function() {
					mapObj.addControl(new AMap.ToolBar());
					mapObj.addControl(new AMap.Scale());
					mapObj.addControl(new AMap.OverView({
						isOpen : true
					}));
				});

		$.post(baseUrl+url+"map/", {}, function(data, status) {
			for (var ii = 0; ii < data.data.length; ii++) {
				if(data.data[ii].longitude!=null){
					var marker = new AMap.Marker({
						position : new AMap.LngLat(data.data[ii].longitude, data.data[ii].latitude),
						title : data.data[ii].userName,
						map : mapObj
					});
				}
			}
		});
	};
	function changeMap(lng, lat, zoom) {
		if (mapObj != null) {
			mapObj.setCenter(new AMap.LngLat(lng, lat));
			mapObj.setZoom(zoom);
		}
	}
</script>
</head>
<body class="container-fluid">
	<table class="table noline">
		<tbody>
			<tr>
				<td>
					<
				    <c:if test="${belongCity=='全国'}">
						<div class="btn-group">
							<button type="button" class="btn btn-info" onclick="changeMap('109.031077', '34.76875','4')">
								<i class="glyphicon glyphicon-search"></i>全国
							</button>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-info" onclick="changeMap('121.472644', '31.227009','11')">
								<i class="glyphicon glyphicon-search"></i>上海
							</button>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-info" onclick="changeMap('103.783732', '36.049157','11')">
								<i class="glyphicon glyphicon-search"></i>兰州
							</button>
						</div>
					</c:if>
				    <c:if test="${belongCity=='兰州'}">
						<div class="btn-group">
							<button type="button" class="btn btn-info" onclick="changeMap('103.783732', '36.049157','11')">
								<i class="glyphicon glyphicon-search"></i>兰州
							</button>
						</div>
					</c:if>
				    <c:if test="${belongCity=='上海'}">
						<div class="btn-group">
							<button type="button" class="btn btn-info" onclick="changeMap('121.472644', '31.227009','11')">
								<i class="glyphicon glyphicon-search"></i>上海
							</button>
						</div>
					</c:if>
				</td>
			</tr>
		</tbody>
	</table>
	<div id="container" style="width: 100%; height: 600px;"></div>

</body>

</html>